<template>
  <view
    v-if="show"
    class="tn-loading"
    :class="[loadingClass]"
    :style="loadingStyle"
  ></view>
</template>

<script lang="ts" setup>
import { loadingProps } from '../../../types/tn-loading'
import { computed, CSSProperties } from 'vue'
import { TuniaoSizes, TuniaoSize } from '../../../types/tuniao-ui'
import { handleValueWithUnit } from '../../../utils'

const props = defineProps(loadingProps)

// 加载动画样式
const loadingStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}

  if (!!props?.size && !TuniaoSizes.includes(props.size as TuniaoSize)) {
    style.width = handleValueWithUnit(props.size)
    style.height = style.width
  }

  if (!!props?.color) {
    if (props?.mode === 'circle') {
      style.borderColor = `#E6E6E6 #E6E6E6 #E6E6E6 ${props.color}`
    }
  }

  return style
})

// 加载对应的类
const loadingClass = computed<string>(() => {
  let clazz: string[] = []

  if (props?.mode) {
    clazz.push(`tn-loading__${props.mode}`)
    if (props?.animation) {
      clazz.push(`tn-loading__${props.mode}--animation`)
    }
  }

  // 内置尺寸
  if (!!props?.size && TuniaoSizes.includes(props.size as TuniaoSize)) {
    clazz.push(`tn-loading--${props.size}`)
  }

  return clazz.join(' ')
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

.tn-loading {
  vertical-align: middle;
  width: 28rpx;
  height: 28rpx;

  /* 内置尺寸 start */
  &--sm {
    width: 24rpx;
    height: 24rpx;
  }
  &--lg {
    width: 36rpx;
    height: 36rpx;
  }
  &--xl {
    width: 44rpx;
    height: 44rpx;
  }
  /* 内置尺寸 end */

  /* 圆圈 start */
  &__circle {
    display: inline-flex;
    background: 0 0;
    border-radius: 50%;
    border: 4rpx solid;
    border-color: #E6E6E6 #E6E6E6 #E6E6E6 #AAAAAA;

    &--animation {
      animation: tn-loading-animation 1s linear infinite;
      -webkit-animation: tn-loading-animation 1s linear infinite;
    }
  }
  /* 圆圈 end */

  /* 花朵 start */
  &__flower {
    display: inline-block;
    background: transparent url() no-repeat;;
    background-size: 100%;

    &--animation {
      animation: tn-loading-animation 1s steps(12) infinite;
      -webkit-animation: tn-loading-animation 1s steps(12) infinite;
    }
  }
  /* 花朵 end */
  
}

/* 动画 start */
@keyframes tn-loading-animation {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
/* 动画 end */
</style>
